<template>
    <section class="page-pd move-container">
        <el-tabs v-model="action" @tab-click="onTabsChanged">
            <el-tab-pane label="迁入" name="in">
                <el-alert
                    title="将人员从其他组织迁移到我方组织"
                    type="warning"
                    :closable="false">
                </el-alert>
                <move-table
                    :action="action"
                    :loading="loading"
                    :total="total"
                    :pageInfo="pageInfo"
                    :list="list"
                    @refresh-list="refreshList">
                </move-table>
            </el-tab-pane>
            <el-tab-pane label="迁出" name="out">
                <el-alert
                    title="将人员从我方组织迁移到其他组织"
                    type="warning"
                    :closable="false">
                </el-alert>
                <move-table
                    :action="action"
                    :loading="loading"
                    :total="total"
                    :pageInfo="pageInfo"
                    :list="list"
                    @refresh-list="refreshList">
                </move-table>
            </el-tab-pane>
        </el-tabs>
    </section>
</template>
<script>
import moveTable from './memberMoveTable';
import { queryMoveList } from '../common/api';
export default {
    data () {
        return {
            action: 'in',
            loading: false,
            list: [],
            total: 0,
            pageInfo: {
                page: 1,
                pageSize: 10
            }
        }
    },
    mounted () {
        this.loadList();
    },
    methods: {
        onTabsChanged ({ name }, event) {
            this.loadList();
        },
        refreshList (pageInfo) {
            this.loadList(pageInfo);
        },
        loadList (pageInfo) {
            const { action, pageInfo: currentPageInfo } = this;
            const type = action === 'in' ? '1' : '2';

            const pageParam = pageInfo || currentPageInfo;

            this.loading = true;
            queryMoveList(pageParam, type).then(({ data, page } = {}) => {
                if (data) {
                    this.list = data;
                }

                if (page) {
                    this.pageInfo = page;
                    this.total = page.total;
                }
            }).finally(() => { this.loading = false; });
        }
    },
    components: { moveTable }
}
</script>
<style scoped lang="scss">
    .move-container {
        /deep/ {
            .pager-square {
                margin-top: 20px;
            }
        }
    }
</style>
